<!--
  数据列表
-->
<template>
<div class="login" @keydown="keydownLogin" tabindex="1">
<div class="HeaderTitle">
  <img class="HeaderTitleImg" src="/static/svg/logo.svg" />
  <h1>武汉水务监测信息系统</h1>
  <div class="LoginBox" >登录
    <el-form ref="form" :model="form" label-width="80px" >
      <el-form-item :required="true">
        <el-input v-model="form.username" placeholder="请输入用户账户" clearable>
          <template slot="prepend"><i><img src="/static/svg/people.svg" style="width:14px;"/></i></template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-input type="password" v-model="form.password" placeholder="请输入账户密码" clearable>
          <template slot="prepend"><i ><img src="/static/svg/lock.svg" style="width:14px;"/></i></template>
        </el-input>
      </el-form-item>
      <el-form-item >
        <el-input v-model="form.CAPTCHA" placeholder="验证码" clearable  >
          <template slot="prepend"><i ><img src="/static/svg/validation.svg" style="width:14px;"/></i></template>
          <template slot="append"><img @click="CAPTCHASrc='/defaultKaptcha.jpg?'+new Date().getTime()" height="35" :src="CAPTCHASrc"></template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :loading="loading" @click="onSubmit" style="width:300px;">{{loading?'登录中':'登录'}}</el-button>
      </el-form-item>
    </el-form>
  </div>
</div>
<div class="download"><a href="/static/guge/guge.exe" download="guge.exe" style="color:#ffffff;">点击下载谷歌游览器</a></div>
</div>
</template>
<script>
export default {
  data () {
    return {
      CAPTCHASrc: '/defaultKaptcha.jpg',
      loading: false,
      form: {
        password: 'wushuichu',
        username: 'wushuichu',
        CAPTCHA: ''
      }
    }
  },
  mounted () {
    let token = this.$route.query.token
    if (token) {
    }
  },
  methods: {
    keydownLogin (e) {
      if (e.keyCode === 13) {
        this.onSubmit()
      }
      e.stopPropagation()
    },
    onSubmit () {
      this.loading = true
      let _this = this
      let param = ''
      for (let i in this.form) {
        param += '&' + i + '=' + this.form[i]
      }
      this.$postJSON('/login', param)
        .then(data => {
          this.loading = false
          if (data['result']) {
            // 保存token
            localStorage['user_login_token'] = data['data']['token']
            // 保存名称
            localStorage['user_login_name'] = data['data']['name']
            // 保存id
            localStorage['user_login_id'] = data['data']['id']
            // 保存寿命
            localStorage['user_login_life'] = data['data']['life']
            // 保存账号
            localStorage['user_login_account'] = data['data']['account']
            let redirect = _this.$route.query.redirect
            _this.$notify({
              message: '登录成功！',
              type: 'success'
            })
            if (redirect) {
              _this.$router.push(redirect)
              return
            }
            _this.$router.push('/')
          } else {
            _this.$notify.error({
              title: '登录失败！',
              message: data['msg']
            })
          }
        })
    }
  }
}
</script>
<style>
.download{
   width: 1000px;
    margin: 0 auto;
    text-align: center;
}
.login{
  background-image:url('/static/img/bj1.jpg');
  background-position: center;
  background-repeat: no-repeat;
  width:100%;
  position: absolute;
  top:0px;
  bottom:0px;
  left:0px;
  right:0px;
}
.HeaderTitle{
  text-align: center;
  padding-top: 100px;
}
.HeaderTitle h1{
  font-size: 28px;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  color: #fff;
  display: inline-block;
  text-shadow: 2px 2px #2b3850;
}
.HeaderTitleImg{
  width: 40px;
  vertical-align: middle;
}
.LoginBox{
  margin: 60px auto;
  width: 300px;
  height: 300px;
  padding: 18px 18px 0px 18px;
  background-color:rgba(255, 255, 255, 0.17);
  color:#fff;
  text-align: center;
  line-height: 30px;
  font-size: 15px;
  text-shadow: 1px 1px #2b3850;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.el-form-item__content{
  margin-left:0px !important;
}
.el-input-group{
margin: 0;
}
</style>
